<template>
  <div class="row" id="translateForm">
    <div class="col-md-6 col-md-offset-3">
      <form id="transForm" class="well form-inline" v-on:submit="formSubmit">
        <input class="form-control" v-model="translateText" type="text" placeholder="请输入需要翻译的内容">
        <select class="form-control" v-model="translateLang">
          <option value="en">English</option>
	  <option value="zh">汉语</option>
          <option value="ru">Russian</option>
          <option value="ko">Korean</option>
          <option value="ja">Janpenese</option>
        </select>
        <input class="btn btn-primary" type="submit" value="翻译">
      </form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "translateForm",
        data: function(){
            return {
                translateText: "",
                translateLang: 'ch'
            }
        },
        methods:{
            formSubmit:function (e) {
                this.$emit("formSubmit",this.translateText,this.translateLang);
                e.preventDefault();
            }
        },
        created() {
            this.translateLang = 'en'
        }
    }
</script>

<style scoped>
  #transForm{
    border-radius: 10px;
    border: 1px #ccc solid;
  }
</style>
